/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --paper:#F7ECDE;
  --paper-deep:#EDDBC3;
  --paper-rose:#F7E4DE;
  --paper-sage:#EDEFDF;
  --paper-lilac:#EEE6F2;
  --paper-white:#FFFBF3;
  --rose:#E8AEBB;
  --rose-deep:#D4899B;
  --sage:#9FB48C;
  --lilac:#BFA8D1;
  --gold:#C7973F;
  --berry:#8C3A4D;
  --berry-deep:#5E2130;
  --ink:#3A2A22;
  --ink-soft:#6B5648;

  --font-display:'Fraunces', serif;
  --font-hand:'Caveat', cursive;
  --font-body:'Nunito', sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; appearance:none; -webkit-appearance:none; }section{ position:relative; }
:focus-visible{ outline:2px solid var(--berry); outline-offset:3px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.wrap{ width:min(1140px, 90vw); margin-inline:auto; }
.section-pad{ padding-block:clamp(70px,11vh,120px); }
.eyebrow{
  font-family:var(--font-hand); font-weight:700;
  font-size:1.35rem; color:var(--berry);
  display:inline-block;
}
.hand{ font-family:var(--font-hand); }
.paper-texture{ position:relative; }
.paper-texture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:multiply;
}

/* torn paper edge, sits at bottom of a section, coloured to match the NEXT section */
.torn{
  position:absolute; left:0; right:0; bottom:-1px; height:34px; z-index:2;
  clip-path:polygon(0 100%,2% 45%,5% 85%,8% 30%,11% 80%,14% 40%,17% 90%,20% 35%,23% 75%,26% 45%,29% 85%,32% 30%,35% 80%,38% 40%,41% 90%,44% 35%,47% 75%,50% 45%,53% 85%,56% 30%,59% 80%,62% 40%,65% 90%,68% 35%,71% 75%,74% 45%,77% 85%,80% 30%,83% 80%,86% 40%,89% 90%,92% 35%,95% 75%,98% 45%,100% 100%);
}

/* washi tape */
.tape{
  position:absolute; width:76px; height:26px;
  opacity:.88; box-shadow:0 2px 3px rgba(58,42,34,.12);
}
.tape--rose{ background:repeating-linear-gradient(45deg, var(--rose) 0 5px, #f2c6d0 5px 10px); }
.tape--sage{ background:repeating-linear-gradient(45deg, var(--sage) 0 5px, #c1d0b0 5px 10px); }
.tape--lilac{ background:repeating-linear-gradient(45deg, var(--lilac) 0 5px, #d6c6e3 5px 10px); }
.tape--gold{ background:repeating-linear-gradient(45deg, var(--gold) 0 5px, #ddb977 5px 10px); }

/* polaroid */
.polaroid{
  background:var(--paper-white);
  padding:10px 10px 30px;
  box-shadow:0 10px 22px rgba(58,42,34,.16);
  display:block;
}
.polaroid-photo{
  aspect-ratio:1/1; background:var(--paper-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background-image:repeating-linear-gradient(135deg, rgba(140,58,77,.08) 0 2px, transparent 2px 13px);
  overflow:hidden;
}
/* once you swap the placeholder spans for a real <img>, this makes it fill the frame and crop neatly */
.polaroid-photo img{ width:100%; height:100%; object-fit:cover; }
.polaroid-tag{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--berry); opacity:.7; }
.polaroid-add{ font-family:var(--font-display); font-style:italic; opacity:.4; font-size:.8rem; }
.polaroid-caption{ font-family:var(--font-hand); font-size:1.15rem; text-align:center; margin-top:8px; color:var(--ink); }

/* sticker badge */
.sticker{
  border:1.5px dashed var(--berry);
  border-radius:50%;
  width:104px; height:104px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-hand); font-weight:700; font-size:1rem; color:var(--berry);
  background:var(--paper-white);
  padding:8px;
  line-height:1.2;
}

.doodle{ position:absolute; color:var(--berry); opacity:.55; width:34px; height:34px; }
.doodle svg{ width:100%; height:100%; }

/* ============================================================
   CURSOR / LOADER / PROGRESS
   ============================================================ */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--berry); display:none; }
.cursor-ring{ width:34px; height:34px; border:1.5px dashed var(--berry); opacity:.7; display:none; transition:width .3s var(--ease),height .3s var(--ease),opacity .3s; }
.has-custom-cursor .cursor-dot,.has-custom-cursor .cursor-ring{ display:block; }
.has-custom-cursor a,.has-custom-cursor button{ cursor:none; }
.cursor-ring.is-active{ width:56px; height:56px; opacity:1; background:rgba(140,58,77,.08); }

.loader{ position:fixed; inset:0; z-index:10000; background:var(--paper); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.loader-mark{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.2rem,7vw,3.4rem); color:var(--berry); }
.loader-line{ width:120px; height:2px; background:var(--paper-deep); position:relative; overflow:hidden; border-radius:2px; }
.loader-line::after{ content:""; position:absolute; inset:0; width:30%; background:var(--gold); animation:loaderSlide 1.1s var(--ease) infinite; }
@keyframes loaderSlide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(430%); } }
.loader.is-done{ animation:fadeOutLoader .7s var(--ease) forwards; pointer-events:none; }
@keyframes fadeOutLoader{ to{ opacity:0; visibility:hidden; } }

.progress-bar{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--gold); z-index:9000; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:800; display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,5vw,50px); mix-blend-mode:difference; }
.nav-mark{ font-family:var(--font-hand); font-weight:700; font-size:1.5rem; color:#fff; }
.nav-toggle{ display:flex; flex-direction:column; gap:6px; width: 32px; height: 32px; padding:8px 0; transform:translateX(26px); }
.nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .4s var(--ease),opacity .3s; } 
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.nav-overlay{ position:fixed; inset:0; z-index:700; background:var(--berry-deep); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2vh,18px); clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .8s var(--ease); pointer-events:none; }
.nav-overlay.is-open{ clip-path:circle(150% at calc(100% - 40px) 40px); pointer-events:auto; }
.nav-overlay a{ font-family:var(--font-display); font-size:clamp(1.5rem,4.6vw,2.3rem); color:var(--paper); font-weight:500; transition:color .3s; }
.nav-overlay a:hover{ color:var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(232,174,187,.5), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(191,168,209,.45), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(159,180,140,.35), transparent 55%),
    var(--paper);
  padding:100px 20px 60px;
  overflow:hidden;
}
.hero-badge{
  position:absolute; top:90px; right:8%;
  width:96px; height:96px; border-radius:50%;
  background:var(--paper-white); border:1.5px dashed var(--berry);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-hand); font-size:.95rem; color:var(--berry); font-weight:700;
  transform:rotate(9deg);
}
.hero-eyebrow{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.hero-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,11vw,6.6rem); line-height:.95; margin-top:18px; color:var(--ink); }
.hero-tagline{ font-family:var(--font-hand); font-weight:700; font-size:clamp(2.6rem,8vw,4.2rem); color:var(--berry); margin-top:2px; transform:rotate(-2deg); }
.hero-sub{ margin-top:26px; max-width:36ch; font-size:1rem; line-height:1.7; color:var(--ink-soft); }
.hero-tape{ top:70px; left:14%; transform:rotate(-8deg); }
.hero-scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font-hand); font-size:1.1rem; color:var(--berry); }
/* HERO DECORATIONS */

.hero-doodle{
  position:absolute;
  color:var(--berry);
  pointer-events:none;
  font-family:var(--font-hand);
}

.hero-flower{
  top:32%;
  left:17%;
  font-size:2.2rem;
  transform:rotate(-15deg);
}

.hero-sparkle{
  top:42%;
  right:20%;
  font-size:1.5rem;
  transform:rotate(12deg);
}

.hero-sparkle-2{
  top:48%;
  right:16%;
  font-size:.9rem;
  transform:rotate(-10deg);
  opacity:.65;
}

.hero-note{
  position:absolute;
  bottom:27%;
  left:12%;
  font-family:var(--font-hand);
  font-size:1.1rem;
  font-weight:700;
  color:var(--berry);
  transform:rotate(-7deg);
}

.hero-tape-2{
  top:42%;
  right:9%;
  width:62px;
  height:22px;
  transform:rotate(18deg);
}

.hero-squiggle{
  position:absolute;
  bottom:19%;
  left:25%;
  color:var(--gold);
  font-size:2rem;
  transform:rotate(-8deg);
  pointer-events:none;
}

@media (max-width:560px){
  .hero-flower{ left:7%; }
  .hero-note{ left:6%; bottom:25%; }
  .hero-tape-2{ right:4%; }
  .hero-sparkle{ right:10%; }
  .hero-squiggle{ left:18%; }
}
/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--paper); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-heading{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.3; margin-block:16px 18px; }
.about-body{ font-size:1rem; line-height:1.85; color:var(--ink-soft); }
.about-body + .about-body{ margin-top:14px; }
.about-edit-note{ margin-top:18px; font-family:var(--font-hand); font-size:1.05rem; color:var(--berry-deep); }
.stickers-row{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.stickers-row .sticker:nth-child(1){ transform:rotate(-6deg); }
.stickers-row .sticker:nth-child(2){ transform:rotate(4deg); }
.stickers-row .sticker:nth-child(3){ transform:rotate(-3deg); }
.doodle-smile {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-left: 4px;
    vertical-align: -5px;
    transform: rotate(-10deg);
}


/* ============================================================
   CONTENTS / INDEX
   ============================================================ */
.contents{ background:var(--paper-deep); }
.contents-inner{ max-width:640px; margin-inline:auto; }
.contents-heading{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3.6vw,2.6rem); text-align:center; }
.contents-list{ margin-top:44px; display:flex; flex-direction:column; gap:4px; list-style:none; }
.contents-item{ display:flex; align-items:baseline; gap:10px; padding-block:14px; border-bottom:1px dotted rgba(58,42,34,.3); transition:padding-left .3s var(--ease); }
.contents-item:hover{ padding-left:10px; }
.contents-item a{ font-family:var(--font-display); font-size:1.1rem; white-space:nowrap; }
.contents-dots{ flex:1; border-bottom:1px dotted rgba(58,42,34,.35); transform:translateY(-4px); }
.contents-page{ font-family:var(--font-hand); font-size:1.1rem; color:var(--berry); white-space:nowrap; }

/* ============================================================
   CHAPTERS (shared)
   ============================================================ */
.chapter-tab{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--berry); color:var(--paper-white);
  padding:8px 22px 8px 16px; border-radius:0 6px 6px 0;
  font-family:var(--font-hand); font-weight:700; font-size:1.15rem;
  margin-bottom:22px;
}
.chapter-heading{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,3.8vw,2.9rem); max-width:16ch; }
.chapter-sub{ margin-top:14px; max-width:48ch; color:var(--ink-soft); line-height:1.7; }
.chapter-grid{ margin-top:clamp(44px,5vh,66px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px); }
.chapter-grid .polaroid:nth-child(4n+1){ transform:rotate(-4deg); }
.chapter-grid .polaroid:nth-child(4n+2){ transform:rotate(3deg); }
.chapter-grid .polaroid:nth-child(4n+3){ transform:rotate(-2deg); }
.chapter-grid .polaroid:nth-child(4n+4){ transform:rotate(5deg); }
.chapter-grid .polaroid:hover{ transform:rotate(0deg) scale(1.04); box-shadow:0 16px 30px rgba(58,42,34,.22); }
.chapter-grid .polaroid{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }

.chapter--1{ background:var(--paper); }
.chapter--2{ background:var(--paper-rose); }
.chapter--3{ background:var(--paper-sage); }
.chapter--4{ background:var(--paper-lilac); }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ background:var(--paper-deep); }
.process-head{ text-align:center; max-width:44ch; margin-inline:auto; }
.process-heading{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:14px; }
.process-row{ margin-top:clamp(48px,6vh,80px); display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.process-card{ background:var(--paper-white); padding:26px 20px; box-shadow:0 8px 18px rgba(58,42,34,.12); }
.process-card:nth-child(odd){ transform:rotate(-2deg); }
.process-card:nth-child(even){ transform:rotate(2deg); }
.process-num{ font-family:var(--font-hand); font-weight:700; font-size:2rem; color:var(--berry); }
.process-title{ font-family:var(--font-display); font-size:1.05rem; margin-top:6px; }
.process-desc{ font-size:.86rem; line-height:1.6; color:var(--ink-soft); margin-top:8px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--berry-deep); color:var(--paper); }
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,80px); align-items:center; }
.contact-eyebrow{ color:var(--gold); font-family:var(--font-hand); font-size:1.3rem; font-weight:700; }
.contact-heading{ font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.2; margin-top:14px; }
.contact-sub{ margin-top:16px; opacity:.8; max-width:40ch; line-height:1.7; }
.contact-rows{ display:flex; flex-direction:column; }
.contact-row{ padding-block:18px; border-top:1px dotted rgba(247,236,222,.3); display:flex; justify-content:space-between; align-items:center; gap:16px; transition:padding-left .3s var(--ease); }
.contact-rows .contact-row:last-child{ border-bottom:1px dotted rgba(247,236,222,.3); }
.contact-row:hover{ padding-left:10px; }
.contact-label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.contact-value{ font-family:var(--font-display); font-size:1.05rem; }
.contact-arrow{ opacity:.5; font-family:var(--font-hand); font-size:1.4rem; transition:transform .3s var(--ease); }
.contact-row:hover .contact-arrow{ transform:translateX(6px); opacity:1; color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--berry-deep); color:var(--paper); text-align:center; padding-block:20px 50px; }
.footer-mark{ font-family:var(--font-hand); font-weight:700; font-size:1.6rem; }
.footer-meta{ margin-top:14px; font-size:.75rem; opacity:.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .about-grid,.contact-grid{ grid-template-columns:1fr; }
  .about-visual{ order:-1; }
  .chapter-grid{ grid-template-columns:repeat(2,1fr); }
  .process-row{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .nav{ mix-blend-mode:normal; background:rgba(247,236,222,.88); backdrop-filter:blur(6px); }
  .nav-mark{ color:var(--berry-deep); }
  .nav-toggle span{ background:var(--berry-deep); }
  .hero-badge{ right:6%; top:80px; width:76px; height:76px; font-size:.78rem; }
}
@media (max-width:560px){
  .chapter-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .contents-item a{ font-size:.95rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .loader{ display:none; }
}
.reduced-motion .loader{ display:none; }